<template>
  <div ref="container" class="dashboard-container">
    <!-- 头部内容 -->
    <el-card class="header-card">
      <div>
        <div class="headImg">
          <!-- 处理默认图片 -->
          <el-image :src="$store.getters.avatar?`https://bhimgs.com/i/2023/07/23/st9c3j.png?fileName=${$store.getters.avatar}`:normalAvatar" fit="fill" :lazy="true" class="user-avatar" />
        </div>
        <div class="headInfoTip">
          <p class="firstChild">{{ studentname }}，欢迎来到智慧农业监测系统</p>
        </div>
      </div>
    </el-card>
    <el-row type="flex" class="row-bg" justify="space-between">
      <!-- <el-col :span="7"> -->
      <el-card style="width:394px;margin-top: 10px;">
        <div slot="header" class="headerClass">
          <span>天气信息</span>
        </div>
        <div id="he-plugin-standard" />
      </el-card>
      <!-- </el-col> -->
      <!-- <el-col :span="17"> -->
      <el-card :style="'width:'+ pageWidth + 'px'" style="margin-top: 10px;" class="system-card">
        <div slot="header" class="headerClass">
          <span>系统概览</span>
        </div>
        <el-row :gutter="20" style="padding: 0 20px">
          <el-col :span="7" class="box">
            <p class="text">用户</p>
            <div class="num"><span class="number" @click="goUser">{{ userTotal }}</span></div>
          </el-col>
          <el-col :span="7" class="box">
            <p class="text">角色</p>
            <div class="num"><span class="number" @click="goRole">{{ roleTotal }}</span></div>
          </el-col>
          <el-col :span="7" class="box">
            <p class="text">设备</p>
            <div class="num"><span class="number" @click="goEquip">{{ equipTotal }}</span></div>
          </el-col>
        </el-row>
        <div style="border-bottom: 1px solid #EBEEF5;">
          <div class="headersClass">
            <span>设备状态</span>
          </div>
        </div>
        <el-row :gutter="20" style="padding: 10px 20px">
          <el-col :span="7" class="box1">
            <p class="text">系统设备状态</p>
            <div class="num"><span class="number">{{ status }}</span></div>
            <p class="text">Topic数量：5</p>
          </el-col>
        </el-row>
        <!-- <div id="container" /> -->
        <!-- <iframe src="http://bishe.ragingwaves.top" width="100%" height="350px" /> -->
      </el-card>
      <!-- </el-col> -->
      <!-- <el-col :span="20">
        <el-card style="margin-top:10px; margin-left:10px;">
          <div style="height: 500px;">
            <chartModal
              :full-option="flowData"
              :loading="flowDataLoading"
            />
          </div>
        </el-card>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import chartModal from '@/components/echart/chartModal.vue'
import chartOpt from '@/components/echart/option.js'
import { debounce } from '@/libs/util'
import AMapLoader from '@amap/amap-jsapi-loader'
import { getstatus } from '@/api/monitor'
import { getAllUser } from '@/api/user'
import { getAllRole } from '@/api/role'
import { getEquipList } from '@/api/equip'

export default {
  name: 'Dashboard',
  components: {
    // EchartForm,
    // chartModal
  },
  data() {
    return {
      flowData: {
        option: {},
        init: false
      },
      flowDataLoading: true,
      pageWidth: '',
      status: '在线',
      userTotal: 0,
      roleTotal: 0,
      equipTotal: 0
    }
  },
  computed: {
    ...mapGetters([
      'studentname'
    ])
  },
  created() {
    // 天气预报模块
    window.WIDGET = {
      'CONFIG': {
        'layout': '2',
        'width': 350,
        'height': 510,
        'background': '1',
        'dataColor': 'FFFFFF',
        'borderRadius': '5',
        'key': 'a0289aca9e23493a8da47bc6def79083'
      }
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0'
    document.getElementsByTagName('head')[0].appendChild(script)
    this.flowDataInit()
  },
  mounted() {
    this.getstatus()
    this.initListener()
    this.$nextTick(() => {
      this.pageWidth = document.body.getBoundingClientRect().width - 665
    })
    this.initMap()
    this.getUserList()
    this.getRoleList()
    this.getEquipList()
  },
  methods: {
    // 点击地图后得到位置信息
    initMap() {
      AMapLoader.load({
        key: '846e33e79b325388f32cc4d826224a46', // 此处填入我们注册账号后获取的Key
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map('container', { // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 30, // 初始化地图级别
          center: [110.346163, 21.2699] // 初始化地图中心点位置
        })
        this.map = new AMap.Marker({
          map: this.map,
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
          position: [110.346163, 21.2699]
        })
      }).catch(e => {
        // console.log(e)
      })
    },
    initListener() {
      // 监听浏览器窗口变化
      this.$_resizeHandler = debounce(() => {
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)
    },
    resize() {
      // 浏览器窗口变化执行函数
      this.$nextTick(() => {
        this.pageWidth = document.body.getBoundingClientRect().width - 665
      })
    },
    flowDataInit() {
      setTimeout(() => {
        this.flowData = {
          option: chartOpt.flowData(),
          init: true
        }
        this.flowDataLoading = false
      }, 500)
    },
    goUser() {
      this.$router.push({
        path: '/users'
      })
    },
    goRole() {
      this.$router.push({
        path: '/role'
      })
    },
    goEquip() {
      this.$router.push({
        path: '/equip'
      })
    },
    // 获取设备状态
    async getstatus(topic) {
      await getstatus({
        uid: 'a3e31f5b515e4dd49ea0d36a8c2ffbdc',
        topic: 'temp'
      }).then((res) => {
        if (res.status === 'online') { this.status = '在线' } else {
          this.status = '离线'
        }
      })
    },
    async getUserList() {
      const { total } = await getAllUser(1, 5)
      this.userTotal = total
    },
    async getRoleList() {
      const { total } = await getAllRole(1, 5)
      this.roleTotal = total
    },
    async getEquipList() {
      const { total } = await getEquipList(1, 5)
      this.equipTotal = total
    }
  }
}
</script>

<style lang="less" scoped>
.header-card{
  position: relative;
  // margin: 10px 0;
  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
}
  .headImg {
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #999;
    .user-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .headInfoTip {
    padding: 25px 0 0;
    margin-left: 120px;
    p {
      padding: 0 0 15px;
      margin: 0;
      &.firstChild {
        font-size: 24px;
      }
      &.lastChild {
        font-size: 20px;
        color: #7f8c8d;
      }
    }
  }
.dashboard {
  &-container {
    padding: 20px;
    .chart{
        margin-left: 85px;
        text-align: center;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.dashboard-container{
  // padding-bottom: 0px;
  /deep/.el-card__body{
    padding: 13px 20px;
  }
  /deep/.el-card__header{
    padding: 10px 20px;
  }
}
.system-card{
    /deep/.el-card__body{
    padding: 13px 0px;
  }
}
.headerClass {
    font-size: 18px;
    font-weight: 600;
}
.headersClass {
    padding: 13px 20px;
    font-size: 18px;
    font-weight: 600;
    // border-bottom: 1px solid #EBEEF5;
}
.box{
  height: 100px;
  background-color: #f9f9f9;
  border: #f0f0f0 1px solid;
  margin-left: 20px;
  max-width: 230px;
  text-align: center;
}
.box1{
  height: 150px;
  background-color: #f9f9f9;
  border: #f0f0f0 1px solid;
  margin-left: 20px;
  max-width: 230px;
  text-align: center;
}
.text{
  line-height: 40px;
  margin-top: 8px;
  color: #999;
  font-size: 18px;
}
.num{
  font-size: 26px;
  font-family: arial;
  color: #20a53a;
}
.number{
  cursor:pointer;

}
  #container {
    width: 96%;
    height: 320px;
    margin: 20px 2%;
    border: 1px solid #999;
  }

</style>
